/* Animated-Text uses the @keyframes feature to animate the color change */
.Animated-Text {
    font-size: 2em;
    animation: color-change 1s infinite alternate;
}

@keyframes color-change {
    0% {
        color: rgb(255, 255, 255);
    }
    100% {
        color: rgb(255, 0, 0);
    }
}

/* Background for the entire welcome page (currently set to black) */
body {
    background-color: rgb(0, 0, 0);
}

/* Button features used for the nav-bar. Upon click, user will be taken to a new page */
.button {
    background-color: #ffffff;
    color: #000000;
    padding: 10px 20px;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    font-size: 30px;
    margin: 20px;
    text-align: center;
    font-family: 'Courier', sans-serif;
    display: inline-block
}

.button:hover {
    background-color: #ff0000;
    color: #ffffff;
}

/* Connected to nav-bar element, which uses @media */
#Directory {
    overflow: hidden;
    width: 100%;
}

/* A subsection of the home page with information regarding the story/concept of Mōri */
/* NOTE - This subsection will also include a gameplay video in the future */
#HomeDescription {
    background-color: white;    
    box-sizing: border-box;
    text-align: center;
    border-radius: 25px;
    padding: 5px;
    margin: 30px;
}

.HomeSubsection {
    color: rgb(0, 0, 0);
    background: linear-gradient(to right, rgb(255, 255, 255), rgb(247, 55, 55));
    border: 5px solid rgb(0, 0, 0);
    outline: rgb(0, 0, 0);
    outline-offset: 0px;
    border-radius: 25px;
}

@media (min-width: 768px) {
    .nav-bar {
        position: static;
        width: auto;
    }
}

.nav-bar {
    list-style-type: none;
    display: flex;
    justify-content: center;
}

.SubsectionClass {
    margin: 40px;
    font-family: 'Times-New-Roman';
    font-size: 20px;
    background: linear-gradient(to right, hsl(0, 100%, 77%), hsl(0, 0%, 100%)); 
    border: 20px solid hsl(0, 0%, 10%);
    border-radius: 50px;

}

/* WelcomeHeader is the main banner at the top of every page */
#WelcomeHeader {
    color: white;
    display: flex;
    
    display:flex;
    flex-direction: column;
    align-items: center;

    position: sticky;
    box-sizing: border-box;

    background: linear-gradient(to right, hsl(0, 0%, 15%), hsl(204, 2%, 55%)); 
    border: 5px solid hsl(0, 0%, 100%);
    border-radius: 30px;
    
    z-index: 100px;
    margin: 30px;
}